<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a>通讯录</a>
                <a href="">通讯录</a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="layui-collapse" lay-filter="test">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
                            <div class="layui-colla-content">
                                <form class="layui-form" action="">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">名称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="nikeName" name="nikeName" class="layui-input"></div></div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="remarks" name="remarks" class="layui-input"></div></div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号码</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="phone" name="phone" class="layui-input"></div></div>
                                    <hr class="layui-bg-gray">
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn layui-btn-lg" id="btn_submit"  lay-submit="" lay-filter="search">立即提交</button>
                                            <button type="reset" class="layui-btn layui-btn-lg layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-btn-group demoTable layui-card-header">
                    <button class="layui-btn layui-btn-danger" data-type="getCheckData">批量删除</button>
                </div>
                <div class="layui-card-body ">
                    <table id="demo" class="layui-table layui-form" lay-filter="demo"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" id="" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table;
        table.render({
            elem: '#demo'
            , id: 'list'
            , dateType: "json"
            , contentType: "application/json"
            , method: "post"
            , url: '/address/list'
            //, where: {userId: sessionStorage.getItem("loginId")}
            , cols: [[ //标题栏
                {type: 'checkbox', LAY_CHECKED: true}
                , {field: 'haoyouId', title: 'ID', sort: true}
                , {field: 'nickName', title: '好友名'}
                , {field: 'remarks', title: '备注'}
                , {field: 'permission', title: '职位'}
                , {field: 'phone', title: '联系方式'}
                , {fixed: 'right', title: '操作', toolbar: '#bar'}
            ]]
            , skin: 'row' //表格风格
            , even: true
            , page: true //是否显示分页
            , limits: [5, 10, 20]
            , limit: 5 //每页默认显示的数量
            , parseData: function (res) { //res 即为原始返回的数据
                console.log(res)
                console.log(res.data);
                return {
                    "code": 0,
                    "count": res.dataSize, //解析数据长度
                    "data": res.data.addressList, //解析数据长度
                    "msg": ""
                };
            }
            ,done : function(res, curr, count){
                table_data=res.data;
                layer.closeAll('loading');
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){
                var checkStatus = table.checkStatus('list')
                var data = checkStatus.data;
                if(data.length > 0) {
                    layer.confirm('真的要删除吗?', {icon: 5, title: '警告'}, function (index) {
                        var jsonText = "[ ";
                        for (var i = 0; i < data.length; i++)
                            jsonText += data[i].haoyouId + ",";
                        jsonText = jsonText.substring(0, jsonText.length - 1);
                        jsonText += " ]";
                        $.ajax({
                            url: "/address/deleteList",
                            dateType: "json",
                            contentType: "application/json",
                            type: "post",
                            data:
                                JSON.stringify({
                                    number: data.length,
                                    haoyouIdArr: jsonText,
                                }),
                            success: function (res) {
                                if (res.msg == 'success') {
                                    layer.msg("删除成功！ 页面即将关闭！ ");
                                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                    console.log(index);
                                    setTimeout(
                                        function () {
                                            parent.layer.close(index);//关闭弹出的子页面窗口*!/
                                        }, 1000)
                                } else {
                                    layer.msg('删除失败');
                                }
                                table.reload('list', {page: {curr: 1}});
                            }
                        })
                        layer.close(index);
                    });
                }
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听行工具事件
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            //console.log(data)
            if(obj.event === 'del'){
                layer.confirm('真的要删除吗?', {icon: 5, title:'警告'}, function(index){
                    $.ajax({
                        url: "/address/deleteOne",
                        dateType: "json",
                        contentType : "application/json",
                        type: "post",
                        data:
                            JSON.stringify({
                                haoyouId : data.haoyouId,
                            }),
                        success: function (res) {
                            if(res.msg == 'success') {
                                layer.msg("删除成功！ ");
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                //console.log(index);
                                setTimeout(
                                    function(){
                                        parent.layer.close(index);//关闭弹出的子页面窗口*!/
                                    },1000)
                            } else {
                                layer.msg('删除失败');
                            }
                            table.reload('list',{ page : { curr : 1 } });
                        }
                    })
                    layer.close(index); });
            } else if(obj.event === 'edit'){
                var name = data.nickName != null ? data.nickName : '编号：' + data.haoyouId;
                xadmin.open('正在编辑< '+ data.nickName+' >的好友信息','partner-edit.html?id='+data.haoyouId+'&nickName='+data.nickName+'&remarks='+data.remarks+'&phone='+data.phone+'&permission='+data.permission,480,350);
            }
        });

        var form = layui.form;
        form.on('submit(search)', function(data){
            //console.log(data.field.phone);
            layer.load();
            table.reload('list', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where:{
                    'phone' : data.field.phone.trim() == "" ? null : data.field.phone,
                    'remarks' : data.field.remarks.trim() == "" ? null : data.field.remarks,
                    'nickName' : data.field.nikeName.trim() == "" ? null : data.field.nikeName
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</html>